import { channleRegulateList, channleRegulateRemove } from "@/services/robotManagement";
import { Button, Modal, Table, message } from "antd";
import moment from "moment";
import React from "react";

class TerminalList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      list:[],
      total:0,
      current:1,
      size:10,
      loading:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  queryByConditions = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  getList = () => {
    const { applicationId } = this.props;
    const { current,size } = this.state;
    this.setState({
      loading:true
    },async () => {
      const res = await channleRegulateList({
        current,
        size,
        applicationId
      })
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }

  confirmRemove = (mobileClientId) => {
    const that = this;
    Modal.confirm({
      title:"确定要强制下线吗？",
      okType:"danger",
      okText:"确定",
      cancelText:"取消",
      onOk:() => {
        that.doConfirm(mobileClientId)
      }
    })
  }

  doConfirm = async (mobileClientId) => {
    const res = await channleRegulateRemove({mobileClientId})
    message.info(res.message)
    this.getList()
  }
  
  render(){
    const { list,total,current,loading,size } = this.state;
    const columns = [
      {
        title:"终端码",
        dataIndex:"screenClientId",
        width:100
      },
      {
        title:"终端上线日期",
        dataIndex:"screenStartTime",
        width:100,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:"状态",
        dataIndex:"mobileStatus",
        width:100
      },
      {
        title:"当前控制端ID",
        dataIndex:"mobileClientId",
        width:100
      },
      {
        title:"操作",
        width:100,
        render:(text,row) => {
          return <Button type="danger" size="small" onClick={() => this.confirmRemove(row.mobileClientId)}>强制下线</Button>
        }
      },
    ]
    return(
      <Table 
        columns={columns}
        dataSource={list}
        loading={loading}
        rowKey={(record,index) => index}
        pagination={{
          current,
          pageSize:size,
          total,
          showQuickJumper:true,
          showSizeChanger:true,
          onChange:this.queryByConditions,
          onShowSizeChange:this.queryByConditions
        }}
      />
    )
  }
}

export default TerminalList